<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./resource/iconfont/iconfont.css">
    <style>
        #xxx{
            font-size: 100px;
            color: red;
        }


        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }


    </style>
    <script src="./resource/iconfont/iconfont.js"></script>
</head>
<body>
    <!--  
        1. 图片形态的有3种
            img 图片
            background 背景图片
            iconfont 字体图标  (支持color, font-size 等字体能用的属性)

        2. iconfont 3种形态
            Unicode    黑白图标
            Font Class 黑白图标
            Symbol  支持有色图标

        3. Unicode 使用
            * 加载 iconfont.css
            * 选择 需要的字体图标Unicode  ( 格式:   &......;  )
            * 给对应的标签赋予class="iconfont"

        4. Font Class 使用
            * 加载 iconfont.css
            * 给对应的标签赋予class="iconfont  icon-xxxxx"

        5. Symbol 使用
            * 加载 iconfont.js
            * 挑选相应图标并获取类名  (图标格式:  #icon-xxxx )

    -->

    <!-- Unicode 使用 -->
    <p class="iconfont" id="xxx">&#xe61f;</p>
    
    
    <!-- Font Class -->
    <p class="iconfont icon-gouwuche-fuben"></p>


    <!-- Symbol 有色图标 -->
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-fangdajing2"></use>
    </svg>

</body>
</html>